<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.1.1.js"></script>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        text-decoration: none;
    }

    body {
        padding: 20px;
    }

    #container {
        width: 600px;
        height: 400px;
        border: 3px solid #333;
        overflow: hidden;
        position: relative;
    }

    #list {
        width: 4200px;
        height: 400px;
        position: absolute;
        z-index: 1;
    }

    #list img {
        float: left;
    }

    #buttons {
        position: absolute;
        height: 10px;
        width: 100px;
        z-index: 2;
        bottom: 20px;
        left: 250px;
    }

    #buttons span {
        cursor: pointer;
        float: left;
        border: 1px solid #fff;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #333;
        margin-right: 5px;
    }

    #buttons .on {
        background: orangered;
    }

    .arrow {
        cursor: pointer;
        display: none;
        line-height: 39px;
        text-align: center;
        font-size: 36px;
        font-weight: bold;
        width: 40px;
        height: 40px;
        position: absolute;
        z-index: 2;
        top: 180px;
        background-color: RGBA(0, 0, 0, .3);
        color: #fff;
    }

    .arrow:hover {
        background-color: RGBA(0, 0, 0, .7);
    }

    #container:hover .arrow {
        display: block;
    }

    #prev {
        left: 20px;
    }

    #next {
        right: 20px;
    }
</style>
<script type="text/javascript" src="js/jquery.1.10.2.js"></script>
<script type="text/javascript">
    $(function () {
        // 小圆点的对应值
        let kxf = 1;
        // 页面加载的时候就调用一下定时器的函数
        lunbotdsq();
        $('#buttons span').click(function () {
            let aaa = $('#list img').width();
            let bbb = $(this).attr('index')
            let ccc = -(aaa * bbb)
            $('#list').animate({
                left: ccc
            })
            kxf = bbb;
            yuandian()
            console.log(bbb)
        })
        // 给下面小圆圈加颜色
        function yuandian() {
            $('#buttons span').eq(kxf - 1).addClass("on").siblings().removeClass('on')
        }
        // 左点击
        $('#prev').click(function () {
            --kxf
            if (kxf < 1) {
                kxf = 5
            }
            zuoyoudianjidonghua();

        })
        // 右点击
        $('#next').click(function () {
            ++kxf
            if (kxf > 5) {
                kxf = 1
            }

            zuoyoudianjidonghua();
        })
        // 图片移动动画效果和距离
        function zuoyoudianjidonghua() {
            let aaa = $('#list img').width();
            $('#list').animate({
                left: -aaa * kxf
            })
            yuandian()
            console.log(-aaa * kxf)
        }
        // 轮播图定时器
        function lunbotdsq() {
            dsq = setInterval(function () {
                ++kxf
                if (kxf > 5) {
                    kxf = 1
                }
                zuoyoudianjidonghua();
            }, 3000);
        }
        // 鼠标悬浮清除定时器
        $('#container').on('mouseenter', function () {
            clearInterval(dsq)
        })
        // 鼠标离开添加动画
        $('#container').on('mouseleave', function () {
            lunbotdsq();
        })
    })
</script>


<body>

<div id="container">
    <div id="list" style="left: -600px;">
        <img src="img/5.jpg" alt="5" />
        <img src="img/1.jpg" alt="1" />
        <img src="img/2.jpg" alt="2" />
        <img src="img/3.jpg" alt="3" />
        <img src="img/4.jpg" alt="4" />
        <img src="img/5.jpg" alt="5" />
        <img src="img/1.jpg" alt="1" />
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow">&lt;</a>
    <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>

</body>

</html>